<template>
  <view class="order-detail">
    <view class="order-info">
      <view class="order-row">
        <view class="label">工作状态</view>
        <uv-text
          :text="statusType(orderInfo.status)"
          :color="statusColor(orderInfo.status)"
          size="28rpx"
        />
      </view>
      <view class="order-row">
        <view class="label">发起人员</view>
        <uv-text
          :text="orderInfo.createByNickName"
          color="#212121"
          size="28rpx"
          lines="1"
        />
      </view>
      <view class="order-row">
        <view class="label">提交时间</view>
        <uv-text :text="orderInfo.createTime" color="#212121" size="28rpx" />
      </view>
    </view>
    <view
      class="order-info"
      :style="{
        marginBottom: functionList.length > 0 ? '160rpx' : '40rpx',
      }"
    >
      <g-steps
        v-if="orderInfo.createTime"
        :steps="stepsList"
        direction="row"
        :dot-color="[3, 8, 9, 11, 14].includes(orderInfo.status) ? '#FF3B30' : '#4EA770'"
        :current="[3, 7, 8, 9, 11, 14].includes(orderInfo.status) ? 1 : 0"
        stepsId="order-steps"
      >
        <template #step1>
          <view class="step-tips"
            >已等待{{
              getTimeDistance(
                orderInfo.createTime,
                orderInfo.status == 3 ? orderInfo.auditTime : orderInfo.overTime
              )
            }}</view
          >
        </template>
      </g-steps>
      <g-tabs-top :list="tabList" v-model:current="current" sticky :col="4" />
      <Trends v-if="current === 0" :orderId="orderInfo.id" />
      <Detail v-if="current === 1" :info="orderInfo" />
      <Comment v-if="current === 2" :orderId="orderInfo.id" v-model:onReach="onReach" />
      <view class="func_btn" v-if="functionList.length > 0 && [0, 1].includes(current)">
        <view
          class="btn_con"
          v-for="(i, k) in functionList"
          :key="k"
          @click="handleCommand(i)"
        >
          <uv-icon
            :name="i.icon"
            size="40rpx"
            :label="i.label"
            label-size="24rpx"
            label-color="#212121"
            label-pos="bottom"
            space="10rpx"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { getTimeDistance } from "@/common/mothed";
import Trends from "@/pages/Order/cp/Trends.vue"; // 动态
import Detail from "@/pages/Order/cp/Detail.vue"; // 详情
import Comment from "@/pages/Order/cp/Comment.vue"; // 评论
import { isOperate, getOrderDetail } from "@/request/order";

import iconAgree from "@/static/order/icon_agree.png"; // 审核通过
import iconDate from "@/static/order/icon_date.png"; // 外勤签到
import iconWarn from "@/static/order/icon_warn.png";

const orderId = ref(""); // 工单id
const orderInfo = ref({}); // 工单详情
const stepsList = ref([{ label: "发起工单" }, { label: "处理完成" }]);

const statusList = ref([
  { label: "待负责人审批", value: 1, color: "#212121" },
  { label: "待业主审批", value: 2, color: "#212121" },
  { label: "被退回", value: 3, color: "#FF3B30" },
  { label: "重新发起", value: 4, color: "#212121" },
  { label: "维修接单", value: 5, color: "#212121" },
  { label: "维修结束", value: 6, color: "#4EA770" },
  { label: "已完结", value: 7, color: "#4EA770" },
  { label: "复验不通过", value: 8, color: "#FF3B30" },
  { label: "撤销工单", value: 9, color: "#212121" },
  { label: "任务发布", value: 10, color: "#212121" },
  { label: "业主退回", value: 11, color: "#FF3B30" },
  // { label: "转回机构处理", value: 12, color: "#212121" },
  // { label: "待二次复验", value: 13, color: "#212121" },
  // { label: "二次复验不通过", value: 14, color: "#FF3B30" },
]); // 状态列表
const current = ref(0); // 选中tab栏
const tabList = ref([
  { label: "工单动态" },
  { label: "工单详情" },
  { label: "评论列表" },
]);
const functionList = ref([]); // 功能按钮列表
const onReach = ref(false); // 是否加载完

onLoad((e) => {
  orderId.value = e.id;
});

onMounted(async () => {
  await getData();
  getFunctionList();
  uni.$on("order", async () => {
    await getData();
    getFunctionList();
  });
});

onBeforeUnmount(() => {
  uni.$off("order");
});

onReachBottom(() => {
  onReach.value = true;
});

// 获取功能按钮列表
const getFunctionList = async () => {
  let list = [];
  const { status } = orderInfo.value;
  const { data } = await isOperate({ id: orderId.value });
  if ([5, 8, 14].includes(status) && data) {
    list.push({ label: "完结工单", icon: iconAgree, type: 6 });
    list.push({ label: "外勤签到", icon: iconDate, type: 0 });
  }
  functionList.value = list;
};
// 获取工单详情
const getData = async () => {
  const res = await getOrderDetail(orderId.value);
  if (res.code == 200) {
    orderInfo.value = res.data;
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: orderInfo.value.title,
    });
  }
};

// 状态类型
const statusType = (status) => {
  let type = statusList.value.find((item) => item.value == status);
  return type?.label;
};

// 状态颜色
const statusColor = (status) => {
  let type = statusList.value.find((item) => item.value == status);
  return type?.color;
};

// 功能事件
const handleCommand = (item) => {
  switch (item.type) {
    case 0:
      // 外勤签到
      uni.navigateTo({
        url: `/pages/sign/index?workOrderId=${orderInfo.value.id}`,
      });
      break;
    case 6:
      // 维修结束
      if (orderInfo.value.signAddress) {
        uni.navigateTo({
          url: `/pages/Order/orderPass?id=${orderInfo.value.id}`,
        });
      } else {
        uni.showToast({
          title: "请先完成签到",
          image: iconWarn,
          duration: 2000,
        });
      }
      break;
  }
};
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 30rpx;

  .order-info {
    width: auto;
    background: #fff;
    box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    .order-row {
      display: flex;
      height: 100rpx;
      align-items: center;
      padding: 0 20rpx;
      border-bottom: 2rpx solid #e5e5e5;

      .label {
        width: 180rpx;
        font-size: 28rpx;
        text-align: center;
        color: #757575;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.step-tips {
  position: absolute;
  left: 0;
  top: 60rpx;
  width: 630rpx;
  text-align: center;
}

.func_btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  z-index: 9;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0 0 30rpx 2rpx rgba(94, 94, 94, 0.16);
  border-radius: 60rpx;
  display: flex;
  align-items: center;

  .btn_con {
    flex: 1;
    text-align: center;
    border-right: 1rpx solid #dedede;

    &:last-child {
      border-right: none;
    }
  }
}
</style>
